<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            margin:0;
            padding:0;
            font-family:"montserrat";
            background-image: linear-gradient(135deg,#080001,#460606,#8d1a0d,#ff3d3d);
            background-size:100%;
            animation:bganimation 15s infinite;
        }
        .text{
            color:white;
            text-align:center;
            text-transform:uppercase;
            margin:350px 0;
            font-size:30px;
        }
        @keyframes bganimation{
            0%{
                background-position:0% 50%;
            }
            50%{
                background-position:100% 50%;
            }
 
        100%{
                background-position:0% 50%;
            }
        }
    </style>
</head>
<body>
    <div class="text">
        Gradient Background Animation
    </div>
</body>
</html>
</p><p>Species in Pieces</p><p></p></ul><p><img src="http://cdn.mockplus.cn/image/2018/10/2f56d73e-54c7-4403-94d2-fcca51fe866c.gif" class="fr-fil fr-dib"></p><p>这是一个基于CSS的交互式动效网页设计，它使用仅三角形片段展示了30个世界上最有趣但不幸濒临灭绝的物种 &ndash; 它们以碎片化的形式，幸存于文字。所有的三角碎片在每次过渡动画中转变成不同的颜色，组成不同的物种。每个动物都配有一个统计图表，以直观的方式展示了它们的进化史以及逐年锐减的物种数量。设计师通过JavaScript和CSS将所有的过渡动作和SVG形状联系起来，制作成这样一个宣传物种保护的网站，希望能为这些物种生存做出自己的努力，也引发人类的思考。</p><p></p>
<html>
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

  <title>Bootstrap练习</title>
  <style>
    #bs div {
      border: 1px double rgb(248, 245, 245);
      /* margin: 1em; */
      padding: 1em;
    }

  </style>
</head>

<body>
  <div class="container">
    <h1>Hello, world!</h1>
  </div>
  <div class="container" id="bs">
    <div class="row">
      <div class="col">
        1 of 2
      </div>
      <div class="col">
        2 of 2
      </div>
    </div>
    <div class="row">
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        1 of 3
      </div>
      <div class="col">
        2 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
      <div class="col">
        3 of 3
      </div>
    </div>
    <div class="row gx-5">
      <div class="col-4">1</div>
      <div class="col-4">2</div>
      <div class="col-4">3</div>
    </div>
  </div>
  <!-- Optional JavaScript; choose one of the two! -->

  <!-- Option 1: Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"></script>

  <!-- Option 2: Separate Popper and Bootstrap JS -->
  <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
    -->
</body>
</html>

